<!DOCTYPE html>
<html>
<head>
	<title>轮播图</title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
			list-style: none;
		}
		a{
			color: #fff;
			text-decoration: none;
		}
		#wrap{
			width: 600px;
			height: 400px;
			margin: 100px auto;
			position:relative;
		}
		#pic li{
			position: absolute;
			display: none;
		}
		#num{
			z-index: 1;
			position: absolute;
			bottom: 10px;
			left: 40%;
		}
		#num li{
			background: #666;
			float: left;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			color: #fff;
			text-align: center;
			line-height: 20px;
			margin: 3px;
		}
		#num li.active{
			background: #f00;
		}
		.arrow{
			z-index: 2;
			position: absolute;
			top: 45%;
			height: 40px;
			width: 30px;
			background: rgba(0,0,0,0.5);
			line-height: 40px;
			text-align: center;
			display: none;
		}
		#wrap:hover .arrow{display: block;}
		#left{
			left: 2%;
		}
		#right{right: 2%;}
	</style>
</head>
<body>
	<div id="wrap">
		<ul id="pic">
			<li style="display: block;"><img src="1.jpg"></li>
			<li><img src="2.jpg"></li>
			<li><img src="3.jpg"></li>
			<li><img src="4.jpg"></li>
			<li><img src="5.jpg"></li>
		</ul>
		<ul id="num">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<a href="javascript:void(0);" class="arrow" id="left">&lt;</a>
		<a href="javascript:void(0);" class="arrow" id="right">&gt;</a>
	</div>

	<script type="text/javascript">
		(function (w,wrap,pic,num,left,right) {
			var g = {index:0};
			function id(a) {
				return document.getElementById(a);
			}
			var wrap = id(wrap);
			var pics = id(pic).getElementsByTagName('li');
			pics = Array.prototype.slice.apply(pics);
			var nums = id(num).getElementsByTagName('li');
			var left = id(left);
			var right = id(right);

			function change(g) {
				var index = (g.index ++) % 5;
				pics.forEach((item,i)=>{
					var num  = nums[i];
					if(index === i){
						num.className = 'active';
						item.style.display = "block";
					}else{
						num.className = '';
						item.style.display = "none";
					}
				})
			}

			g.timmer = setInterval(change, 2000, g);

			wrap.addEventListener('mouseover',e=>clearInterval(g.timmer));
			wrap.addEventListener('mouseout',e=>g.timmer = setInterval(change, 2000, g));

			left.onclick = e=>{
				g.index+=3;
				change(g);
			}
			right.onclick = e=>change(g);
		})(window,"wrap","pic","num","left","right");
	</script>
</body>
</html>